<template>
  <div id="login">
    <div class="content">
    <div class="loginPage">
            <h1>电商后台管理系统</h1>  
         <input type="text" v-model="username"  required="required" placeholder="用户名">
         <input type="password" required="required" placeholder="密码" v-model="password">

          <button @click="login" class="btn">登录</button>
    </div>


    </div>
      
  </div>
</template>
<script>
import {loginhttp} from '../../http/requset'
export default {
  name: "App",
  data(){
    return {
      username:"",
      password:"",
      rule: "^[a-zA-Z0-9]{5,12}$",
      loginFlag:false
    }
  },
  methods:{
    login(){
      if(this.username.trim()==''||this.password.trim()==''){
        alert('用户名或者密码不能为空')
        return
      }
      if (!new RegExp(this.rule).test(this.username)) {
        return this.$message.error('格式不正确');
      }
      loginhttp({
         username:this.username,
          password:this.password
      })
      .then(res=>{
        // console.log(res);
        // console.log(res);
        if(res.meta&&res.meta.status=="200"){
          this.$message.success(res.meta.msg);
          // 本地存储token和用户名信息
          localStorage.setItem('token',res.data.token)
          localStorage.setItem('username',res.data.username);
          setTimeout(() => {
            this.$router.push('/1')
          }, 1000);
        }
      })
      .catch(err=>{
        console.log(err);
        alert('接口异常')
      })
    },

    // 退出登录
    // loginOut(){
    //   localStorage.removeItem('token')
    //   localStorage.removeItem('username')
    //   setTimeout(()=>{
    //     this.loginFlag = true;
    //   },500)
      
    // }
  }
};
</script>

<style scoped> 
#login{
   width: 100%;   
    height: 100%;   
    overflow: hidden;   
} 
.content{   
  width: 100vw;   
  height: 100vh;   
  margin: 0;   
/* background:-ms-linear-gradient(top,rgb(255,50,98),rgb(50,255,228)); */
  background: -webkit-linear-gradient(left, rgb(190, 112, 125) ,rgb(64, 64, 189));
}   
.loginPage{   
    position: absolute;   
    top: 50%;   
    left:50%;   
    margin: -150px 0 0 -150px;   
    width: 300px;   
    height: 300px;   
}   
.content h1{   
    color: #fff;   
    text-shadow:0 0 10px;   
    letter-spacing: 1px;   
    text-align: center;   
}   
h1{   
    font-size: 2em;   
    margin: 0.67em 0;   
}   
input{   
    width: 278px;   
    height: 18px;   
    margin-bottom: 10px;   
    outline: none;   
    padding: 10px;   
    font-size: 13px;   
    color: #fff;   
    text-shadow:1px 1px 1px;   
    border-top: 1px solid #312E3D;   
    border-left: 1px solid #312E3D;   
    border-right: 1px solid #312E3D;   
    border-bottom: 1px solid #56536A;   
    border-radius: 4px;   
    background-color: #333;   
}   
.btn{   
    width: 300px;   
    min-height: 20px;   
    display: block;   
    background-color: #4a77d4;   
    border: 1px solid #3762bc;   
    color: #fff;   
    padding: 9px 14px;   
    font-size: 15px;   
    line-height: normal;   
    border-radius: 5px;   
    margin: 0;   
}  
</style>
